Skip to main content

Idle Bloat Perception + Dark Mode Not Activating

This incident documents a follow-up case where the site felt bloated while idle and dark mode appeared not to activate.

Symptoms​

  • Reported: site feels bloated even without active browsing.
  • Reported: dark mode toggle/activation not working as expected.

What Was Checked​

Runtime usage (containers)​

  • docusaurus CPU and RAM were low at idle (near 0% CPU, low memory footprint).
  • cloudflared was also low usage.

Build/runtime strategy​

  • Production startup previously used build-on-start (npm run start) and was changed to serve-only (npm run prod) to avoid restart-time build churn.

Frontend theme behavior​

  • Theme bootstrap script in generated HTML previously defaulted to light/system in some cases.
  • Confirmed updated bootstrap now sets dark by default when no stored preference exists.

Fixes Applied​

1) Keep production in serve-only mode​

File:

  • /opt/docker-data/apps/docusaurus/docker-compose.yml

Production command remains:

command: npm run prod

This avoids recurring build work on container starts.

2) Explicit color mode configuration​

File:

  • /opt/docker-data/apps/docusaurus/site/docusaurus.config.js

Applied:

colorMode: {
  defaultMode: 'dark',
  disableSwitch: false,
  respectPrefersColorScheme: false,
}

Result: dark mode is the default when no stored user preference exists, and switching remains enabled.

3) Rebuild and restart​

sudo docker exec docusaurus sh -lc 'cd /app && npm run build'
sudo docker restart docusaurus

Validation​

  • docusaurus serves build successfully.
  • Public endpoint remains healthy behind Cloudflare Access (302, no 502).
  • Generated HTML now boots with dark default:
document.documentElement.setAttribute("data-theme", t || "dark")

Notes​

The search index (build/search-index.json) is large for this documentation set (~24 MB). This affects client-side search payload, but it is separate from backend idle CPU/RAM consumption.